<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="format-detection" content="telephone = no" />
		<meta name="format-detection" content="email = no" />
		<title>Document</title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="./CSS/style.css">
		<script src="./JS/jquery-1.7.2.min.js"></script>
	</head>

	<body style="background-color: #eee;">
		<div class="Look" style="display: none;">
			<div class="al">
				<div class=" text top">第三方账号</div>
				<div class=" text"><a href="" class="or">新浪</a></div>
				<div class=" text or"><a href="" class="or">微信</a></div>
				<div class=" text or"><a href="" class="or">QQ</a></div>
				<div  class=" text" id="cancel" style="border: none"><a href="javascript:;" class="or">取消</a></div>
			</div>
		</div>
		<header>
			<div class="Arrow">
				<a href="" class="fa fa-reply fl" aria-hidden="true"></a>
			</div>
			<div class="login">
				登陆
			</div>
		</header>
		<section style="background: #FFF;height: 45%;">
			<div class="header_L">
				<a href="javascript:;" class="Login-1 fl">手机账号登陆</a>
				<a href="javascript:;" class="Login-2 fr">账号账号登陆</a>
			</div>
			<ul>
				<li class="con_r_left" style="display: block;">
					<div class="phone">
						<i class="fa fa-mobile fl" aria-hidden="true"></i>
						<input type="text" name="" id="" placeholder="请输入手机号">
						<a href="" class="yzm ">获取验证码</a>
						<div class="yzm-1">
							<i class="fa fa-text-height fl" aria-hidden="true"></i>
							<input type="text" name="" id="" placeholder="请输入验证码" style="margin-left: -2.68rem;">
						</div>
					</div>
				</li>
				<li class="con_r_right" style="display: none;">
					<div class="phone">
						<i class="fa fa-user fl" aria-hidden="true"></i>
						<input type="text" name="" id="" placeholder="请输入账号">
						<div class="password">
							<i class="fa fa-unlock-alt fl" aria-hidden="true"></i>
							<input type="text" name="" id="" placeholder="请输入密码">
						</div>
					</div>
				</li>
			</ul>
		</section>
		<footer>
			<div class="bth">
				<a href="" class="submil_a">登陆</a>
			</div>
			<div class="Thirdparty">
				<a href="javascript:;" class="TDy_a" id="TD_a">其他登陆方式</a>
			</div>
		</footer>
	</body>

</html>

<script type="text/javascript">
	//登陆注册的切换
	$(function() {
		$(".Login-1").click(function() {
			$(this).css({
				"background": "#FFF"
			});
			$(".Login-2").css({
				"background": "#eee"
			});
			$(".con_r_left").css("display", "block");
			$(".con_r_right").css("display", "none");
		});
	})
	$(function() {
		$(".Login-2").click(function() {
			$(this).css({
				"background": "#FFF"
			});
			$(".Login-1").css({
				"background": "#eee"
			});
			$(".con_r_left").css("display", "none");
			$(".con_r_right").css("display", "block");
		});
	})

	//弹窗    
	$(function() {
		$("#TD_a").click(function() {
			$(".Look").css("display", "block");
		});
		$("#cancel").click(function() {
			$(".Look").css("display", "none");
		});
	})
</script>